<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>我的订单</p>
        </header>
        <!-- 订单列表部分 -->
        <h3>未支付订单信息：</h3>
        <ul class="order" v-for="item in orderArr" v-if="item.orderState == 0">
            <li @click="toDetailedOrders(item.orderId)">
                <div class="order-info">
                    <img :src=item.business.businessImg>
                    <p>
                        {{ item.business.businessName }}
                        <i class="fa fa-caret-down"></i>
                    </p>
                    <div class="order-info-right">
                        <p>&#165;{{ item.orderTotal }}</p>
                        <div class="order-info-right-icon" >去支付</div>
                    </div>
                </div>
                <ul class="order-detailet">
                    <li v-for="od_Item in item.list" :key="od_Item.food.foodId">
                        <img :src="od_Item.food.foodImg">
                    </li>
                </ul>
                <div class="buttom">
                    <p class="orderdate">{{ item.orderDate }}</p>
                    <button class="once-again">再来一单</button>
                    <button @click="to_comment(item.orderId,item.business.businessId)" class="once-again">去评价</button>
                </div>
            </li>
        </ul>
        <h3>已支付订单信息：</h3>
        <div style="height: 20vw;"></div>
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '../components/Footer.vue';
export default {
    name: 'OrderList',
    data() {
        return {
            orderArr: [],
            user: {},
        }
    },
    created() {

        this.user = this.$getSessionStorage('user');
        this.$axios.post('OrdersController/listOrdersByUserId', this.$qs.stringify({
            userId: this.user.userId
        })).then(response => {
            let result = response.data;
            for (let orders of result) {
                orders.isShowDetailet = false;
            }
            this.orderArr = result;
        }).catch(error => {
            console.error(error);
        });
    },
    methods: {
        toDetailedOrders(orderId){
            this.$router.push({ path: '/DetailedOrders', query: { orderId: orderId } });
        },
        to_comment(orderId,businessId){
            this.$router.push({ path: '/userComment', query: { orderId: orderId ,businessId: businessId } });
        }
    },
    components: {
        Footer
    }
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: auto;
    background-color: #e4ebef;
    z-index: -9999;
}

/****************** header部分 ******************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/****************** 历史订单列表部分 ******************/
.wrapper h3 {
    margin-top: 12vw;
    box-sizing: border-box;
    padding: 4vw;
    font-size: 4vw;
    font-weight: 300;
    color: #999;
}
.wrapper .order {
    width: 100%;
    border-radius: 30vw;
    align-items: center;
    display: flex;
}
.wrapper .order li {
    width: 96%;
    height: 100%;
    border-radius: 4vw;
    margin-left: 2vw;
    margin-bottom: 1vw;
    background-color: #fff;
}

.wrapper .order li .order-info {
    box-sizing: border-box;
    padding: 2vw 4vw;
    font-size: 4vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .order li .order-info img {
    width: 7vw;
    height: 7vw;
}

.wrapper .order li .order-info .order-info-right {
    display: flex;
}

.wrapper .order li .order-info .order-info-right .order-info-right-icon {
    background-color: #f90;
    color: #fff;
    border-radius: 3px;
    margin-left: 2vw;
    user-select: none;
    cursor: pointer;
}

.wrapper .order li .buttom{
    display: flex;
    justify-content: space-around;
}

.wrapper .order li .buttom .orderdate {
    color: #999;
    margin-left: 4vw;
}

.wrapper .order li .buttom .once-again{
    background-color: #fff;
    color:#0097FF;
    border: solid 0.2vw rgb(61, 146, 167);
    font-size: 4vw;
    width: 20vw;
    height: 8vw;
    border-radius: 4vw;
    margin-bottom: 3vw;
}

.wrapper .order li .order-detailet {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* 靠左对齐 */
    flex-wrap: nowrap;
    padding: 1vw 0;
    margin-left: 10vw;
}

.wrapper .order li .order-detailet li {
    width: auto; /* 让每个图片li宽度自适应 */
    margin-right: 1.5vw; /* 图片间距 */
    display: flex;
    align-items: center;
    padding: 0;

}

.wrapper .order li .order-detailet li img {
    width: 10vw;
    height: 10vw;
    border-radius: 2vw;

}



/****************** 底部菜单部分 ******************/
.wrapper .footer {
    width: 100%;
    height: 14vw;
    border-top: solid 1px #DDD;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.wrapper .footer li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #999;
    user-select: none;
    cursor: pointer;
}

.wrapper .footer li p {
    font-size: 2.8vw;
}

.wrapper .footer li i {
    font-size: 5vw;
}
</style>